<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>活动管理</cite></a>
    <a layadmin-event="back">返回列表</a>
    <script type="text/html" template>
      {{# if (layui.router().search.id) { }}
      <a><cite>合成公式编辑</cite></a>
      {{# } else { }}
      <a><cite>合成公式添加</cite></a>
      {{# } }}
    </script>
  </div>
</div>

<script type="text/html" template
        lay-url="{{layui.router().search.id ? 'agent-admin/convert_formulas/' + layui.router().search.id : ''}}"
        lay-done="layui.data.done(d.data)">
  {{# var data = d.data || {} }}
  <div class="layui-form" lay-filter="form_convert_formulas">
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-card-header">
          合成目标
        </div>
        <div class="layui-card-body">
          <input type="hidden" name="id" value="{{data.id || ''}}"/>
          <div class="layui-form-item">
            <label class="layui-form-label">合成名称</label>
            <div class="layui-input-inline">
              <input type="text" name="name" value="{{data.name || ''}}" lay-verify="required"
                     autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label form-required">目标商品</label>
            <div class="layui-input-inline" style="width: 400px">
              <select name="target_product_id">
                <option value="">请选择要合成的目标商品</option>
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">起止时间</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" lay-verify="required" name="start_time" id="start_time"
                     value="{{data.start_time || ''}}" autocomplete="off">
            </div>
            <div class="layui-form-mid layui-word-aux">~</div>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" lay-verify="required" name="end_time" id="end_time"
                     value="{{data.end_time || ''}}" autocomplete="off">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">合成限量</label>
            <div class="layui-input-inline">
              <input type="number" name="limit" value="{{data.limit || -1}}" lay-verify="required"
                     autocomplete="off" class="layui-input" placeholder="每人最多可合成数量">
            </div>
            <div class="layui-form-mid layui-word-aux">-1代表不限制合成数量</div>
          </div>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">
          合成要求
        </div>
        <div class="layui-card-body">
          <div class="layui-form-item">
            <div class="layui-form-label"></div>
            <div class="layui-form-mid">
              <button class="layui-btn layui-btn-sm" id="btnAddProduct"><i class="layui-icon layui-icon-add-1"></i>添加商品
              </button>
            </div>
          </div>
          <div class="layui-form-item">
            <div id="product_panel"></div>
          </div>
        </div>
        <div class="layui-footer">
          <div class="layui-input-block">
            <input type="button" lay-submit lay-filter="submit_convert_formulas" value="保存" class="layui-btn">
            <input type="button" layadmin-event="back" value="返回" class="layui-btn layui-btn-primary">
          </div>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 60px"></div>
  </div>
</script>

<script type="text/html" id="tpl_add_product">
  <div style="padding-top: 20px">
    <div class="layui-inline">
      <div class="layui-form-label">商品名称</div>
      <div class="layui-input-inline" style="width: 300px">
        <select name="demand_product_ids[]" lay-verify="required" lay-reqtext="请选择商品" lay-verType="tips">
          <option value="">选择合成所需的商品</option>
          {{# layui.each(d.products, function(index, product){ }}
          <option value="{{product.id}}" {{product.id===d.product_id?'selected':''}}>{{product.name}}
          </option>
          {{# }) }}
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <div class="layui-form-label">商品数量</div>
      <div class="layui-input-inline" style="width: 100px">
        <input type="text" name="demand_quantities[]" lay-verify="required" lay-reqtext="请输入数量" lay-verType="tips"
               placeholder="" class="layui-input" value="{{d.quantity || 1}}">
      </div>
    </div>
    <div class="layui-inline">
      <div class="layui-btn-group">
        <a class="btn-delete layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"></i></a>
      </div>
    </div>
  </div>
</script>

<script>
  layui.data.done = function (obj) {
    console.log(obj)
    layui.use(['laydate'], function () {
      let $ = layui.$
        , admin = layui.admin
        , form = layui.form
        , laytpl = layui.laytpl
        , laydate = layui.laydate

      //日历初始化
      laydate.render({
        elem: '#start_time'
        , type: 'datetime'
      });
      laydate.render({
        elem: '#end_time'
        , type: 'datetime'
      });
      //加载可用商品列表
      let products = [];
      let product_count = 2
      admin.get('agent-admin/products?limit=1000', function (res) {
        products = res.data
        layui.each(products, function (index, product) {
          let opt = new Option(product.name + '(库存数量: ' + product.available_tokens_count + ')', product.id)
          if (obj && obj.target_product_id === product.id) {
            opt.selected = true
          }
          $('select[name="target_product_id"]').append(opt)
        })
        if (obj && obj.demands) {
          product_count = obj.demands.length
          layui.each(obj.demands, function (index, demand) {
            addProductRow(demand.product_id, demand.quantity)
          })
        } else {
          addProductRow()
          addProductRow()
        }
        $('#btnAddProduct').click(function () {
          addProductRow()
          product_count++
          return false;
        })
        form.render()
      })
      $('#product_panel').on('click', '.btn-delete', function () {
        if (product_count <= 2) {
          layer.msg('合成至少需要两个商品')
          return;
        }
        let currentRow = $(this).parent().parent().parent()
        currentRow.remove()
        product_count--
      })

      //提交
      form.on('submit(submit_convert_formulas)', function (d) {
        layer.load();
        admin.post('agent-admin/convert_formulas', d.field, function () {
          history.back()
        }, {hasLoading: true})
        return false;
      })


      function addProductRow(product_id, quantity) {
        let tpl_add_product = $('#tpl_add_product').html()
        $('#product_panel').append(laytpl(tpl_add_product).render({
          products: products,
          product_id: product_id,
          quantity: quantity
        }))
        form.render()
      }
    })
  }
</script>
